<template>
  <!-- 金融诉求编辑页 -->
  <div>
    <ContainerTitle text="融资详情" class="title"></ContainerTitle>
    <div class="b-title">融资基本信息</div>
    <div class="tableDiv">
      <div class="rowDiv">
        <div class="keyDiv">融资诉求名称</div>
        <div class="valueDiv">{{ detail.appealName }}</div>
        <div class="keyDiv">融资项目名称</div>
        <div class="valueDiv">{{ detail.financingName }}</div>
      </div>
      <div class="rowDiv">
        <div class="keyDiv">融资类型</div>
        <div class="valueDiv">
          {{ $selectDict(type, detail.financingType).dictLabel }}
        </div>
        <div class="keyDiv">联系人</div>
        <div class="valueDiv">{{ detail.contacts }}</div>
      </div>
      <div class="rowDiv">
        <div class="keyDiv">融资轮次</div>
        <div class="valueDiv">
          {{ $selectDict(turn, detail.financingTurn).dictLabel }}
        </div>
        <div class="keyDiv">联系电话</div>
        <div class="valueDiv">{{ detail.contactsTel }}</div>
      </div>
      <div class="rowDiv">
        <div class="keyDiv">融资金额</div>
        <div class="valueDiv">
          {{ detail.financingMoney ? detail.financingMoney + "万" : "" }}
        </div>
        <div class="keyDiv">融资期限</div>
        <div class="valueDiv">
          {{ detail.startTimeStr + " — " + detail.endTimeStr }}
        </div>
      </div>
      <div class="rowDiv">
        <div class="keyDiv">公司财务状况</div>
        <div class="valueDiv">
          {{ $selectDict(status, detail.financeStatus).dictLabel }}
        </div>
        <div class="keyDiv">企业标签</div>
        <div class="valueDiv">{{ detail.companyTag }}</div>
      </div>
      <div class="rowDiv">
        <div class="keyDiv">简介</div>
        <div class="valueDiv">{{ detail.financingIntroduce }}</div>
        <div class="keyDiv">资金用途</div>
        <div class="valueDiv">{{ detail.financingPurpose }}</div>
      </div>
      <div class="rowDiv">
        <div class="keyDiv">融资期望</div>
        <div class="valueDiv">{{ detail.financingExpect }}</div>
        <div class="keyDiv">担保方式</div>
        <div class="valueDiv">{{ $selectDict(financeGuaranteeOptions, detail.guaranteeType).dictLabel }}</div>
      </div>
      <div class="rowDiv">
        <div class="keyDiv">公司官网</div>
        <div class="valueDiv">{{ detail.officialWebsite }}</div>
        <div class="keyDiv">状态</div>
        <div class="valueDiv">
          {{ $selectDict(financing, detail.financingStatus).dictLabel }}
        </div>
      </div>
      <div class="rowDiv">
        <!-- <div class="keyDiv">公司地址</div>
        <div class="valueDiv">{{ detail.detailedAddress }}</div> -->
        <div class="keyDiv">发布时间</div>
        <div class="valueDiv">{{ detail.releaseTimeStr }}</div>
      </div>
      <div class="rowDiv">
        <div class="keyDiv">项目描述</div>
        <div class="valueDivFull">
          {{ detail.projectDescribe }}
        </div>
      </div>
      <div class="rowDiv">
        <div class="keyDiv">项目详情</div>
        <div class="valueDivFull" v-html="detail.projectDetails"></div>
      </div>
    </div>
  </div>
</template>
<script>
import { getMyFinancingDetails } from "@/common/api/company.js";
export default {
  data() {
    return {
      name: "finance",
      crumbs: [
        {
          label: "企业空间",
          value: "company",
        },
        {
          label: "金融服务",
          value: "",
        },
        {
          label: "我的融资",
          value: "myFinancing",
        },
        {
          label: "融资详情",
          value: "myFinancingDetail",
          choose: true,
        },
      ],
      detail: {},
      id: "",
      type: [],
      turn: [],
      status: [],
      financing: [],
      financeGuaranteeOptions: [],
      financeCompanySource: []
    };
  },

  mounted() {
    this.getDict();
    this.id = this.$route.query.id;
    this.getDataList();
  },
  methods: {
    async getDict() {
      // 调用公共方法中的查询字典表
      this.getDictList(this,`finance_financing_type,finance_financing_turn,finance_com_financing_status,finance_com_finance_status,finance_guarantee_way`).then(res => {
        this.financeGuaranteeOptions = res.finance_guarantee_way;
        this.type = res.finance_financing_type;
        this.turn = res.finance_financing_turn;
        this.status = res.finance_com_finance_status;
        this.financing = res.finance_com_financing_status;
      })
    },
    /**
     * 返回上一页
     */
    goBack: function () {
      this.$router.back();
    },

    async getDataList() {
      let res = await getMyFinancingDetails(this.id);
      if (res.code == 200) {
        this.detail = res.data.companyFinancing;
      } else {
        this.$message.error(res.msg);
      }
    },
  },
};
</script>
<style scoped>
.breadcrumb {
  width: 1000px;
  margin: 20px 0;
}
.backBtn {
  border: 1px solid #eeeeee;
  white-space: nowrap;
  font-size: 12px;
  height: 30px;
  width: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  cursor: pointer;
}
.roomDiv {
  display: flex;
  justify-content: center;
}

.roomDiv .leftDiv {
  width: 200px;
  text-align: left;
}

.roomDiv .rightDiv {
  width: 800px;
  margin-left: 30px;
}
.titleDiv {
  border-bottom: 2px solid #045db9;
  text-align: left;
  padding: 10px;
  font-size: 20px;
  font-weight: bold;
  color: #045db9;
  margin-bottom: 20px;
}
.layout {
  min-height: 100vh;
  position: relative;
  padding-bottom: 150px;
  box-sizing: border-box;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.b-title {
  color: #333;
  font-weight: bold;
  font-size: 24px;
  text-align: left;
  margin-bottom: 15px;
}

.tableDiv {
  font-size: 15px;
  border: 1px solid #eeeeee;
  color: #666666;
  margin-bottom: 150px;
}

.tableDiv .rowDiv {
  display: flex;
  justify-content: flex-start;
  border-bottom: 1px solid #eeeeee;
}

.tableDiv .rowDiv:last-of-type {
  border-bottom: none;
}

.tableDiv .rowDiv .keyDiv {
  flex-shrink: 0;
  padding: 10px;
  background-color: #f4f4f4;
  width: 110px;
  color: #333;
  font-size: 14px;
  text-align: right;
}

.tableDiv .rowDiv .valueDiv {
  padding: 10px;
  width: 40%;
  font-size: 14px;
  text-align: left;
  word-break: break-all;
}

.tableDiv .rowDiv .valueDivFull {
  padding: 10px;
  /* width: 40%; */
  text-align: left;
  word-break: break-all;
}

.tableDiv .rowDiv .valueDiv img:hover {
  cursor: pointer;
}
</style>